<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="/static/qywx/js/vue.min.js"></script>
<!--<template>-->
    <div>
        <a-modal
                :title="$t('session_timeout_re_login')"
                centered
                :maskClosable="false"
                :closable="false"
                :width="400"
                v-model="visible"
                :footer="null"
                class="qywx-modal-login"
        >
            <iframe class="iframe" :src="src" ></iframe>
        </a-modal>
    </div>
<!--</template>-->
<script>
    import axios from 'axios'
    import qs from 'qs';
    import router from '@/global/router.js'
    new Vue({
        el: '#intro',
        mounted() {
            window.addEventListener('message', this.handleMessageChange, false)
        },
        beforeDestroy() {
            window.removeEventListener('message', this.handleMessageChange)
        },
        watch: {
            qywxModalLoginVisible() {
                this.visible = this.qywxModalLoginVisible
            },
        },
        data () {
            return {
                visible: false,
            }
        },
        computed: {
            qywxModalLoginVisible() {
                return this.$store.state.base.qywxModalLoginVisible
            },
            src() {
                let protocol = window.location.protocol
                let host = window.location.host
                return protocol + '//' + host + '/#/qywx-modal-login-iframe'
            }
        },
        methods: {
            handleMessageChange(event) {
                let protocol = window.location.protocol
                let host = window.location.host
                let origin = protocol + '//' + host

                if (event.origin !== origin) {
                    return
                }

                let data = event.data || {}
                if (data.type != 'QYWX_MODAL_LOGIN_REDIRECT') {
                    return
                }

                this.login(data.qywxCode)
            },
            login(code) {
                if (!code) {
                    Gikam
                    return
                }

                let data = { code }
                // 登录
                axios({
                    method: 'post',
                    url: '/infra/security/qywxLogin',
                    data: qs.stringify(data),
                }).then(res => {
                    let data = res.data || {}
                    if (!data.success) {
                        this.processError(data)
                        return
                    }

                    let authToken = data.authToken
                    localStorage.setItem('authToken', authToken)
                    axios.defaults.headers.common['Authorization'] = authToken

                    // close modal
                    this.$store.commit('base/closeQywxModalLogin')
                }).finally(()=>{
                })
            },
            processError(data) {
                let msg = data.msg
                msg = JSON.parse(msg)
                this.$error({
                    title: this.$t('error_message'),
                    content: this.$t(msg.errorCode, msg.params),
                    okText: this.$t('modal_ok'),
                    onOk() {
                        router.push({ name: 'QywxLogin', params: {} })
                    },
                })
            }
        },
    });
</script>
<style>
    .qywx-modal-login .iframe {
        border: 0;
        width: 352px;
        height: 406px;
    }
</style>
</body>
</html>